<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getIcon } from "@/api/assets/assets";

// 静态导入图片
// import img200 from '@/assets/200.png'
// import img201 from '@/assets/201.png'
// import img202 from '@/assets/202.png'
// import img203 from '@/assets/203.png'
// import img204 from '@/assets/204.png'

const img200 = ref<string | null>(null)
const img201 = ref<string | null>(null)
const img202 = ref<string | null>(null)
const img203 = ref<string | null>(null)
const img204 = ref<string | null>(null)

const fetchIcon = async () => {
  try {
    const data = await getIcon(['200.png', '201.png', '202.png', '203.png', '204.png'])
    img200.value = data['200.png']
    img201.value = data['201.png']
    img202.value = data['202.png']
    img203.value = data['203.png']
    img204.value = data['204.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
  }
}

onMounted(() => {
  fetchIcon()
})

// 用于保存当前选中的标签
const activeTab = ref('一键接入')

// 用于设置当前选中的标签
const setActiveTab = (tab: string) => {
  activeTab.value = tab
}

// 获取不同标签对应的背景图片
const getBackgroundImage = computed(
  () => {
    switch (activeTab.value) {
      case '一键接入':
        return img200.value
      case '可视化编排':
        return img201.value
      case '灵活搭建':
        return img204.value
      case '自由集成':
        return img203.value
      case '一键发布':
        return img202.value
      default:
        return ''
    }
  },
)

// 渲染不同标签的内容
const renderContent = () => {
  switch (activeTab.value) {
    case '一键接入':
      return [
        { title: '一键导入', description: '学生通过简单点击即可将大模型能力导入到自己的项目中，无需复杂操作。' },
        { title: '模板配置', description: '提供预置的接口和配置模板，帮助学生快速完成大模型的设置与应用。' },
        { title: '快速集成', description: '支持学生即时将大模型与现有应用快速集成，实现高效部署和测试。' },
        // { title: '参数调优', description: '平台提供便捷的参数调优工具，帮助学生优化大模型性能，提升应用效果。' },
      ]
    case '可视化编排':
      return [
        { title: '拖拽设计', description: '学生通过拖拽组件的方式，直观地设计大模型应用的逻辑和流程。' },
        { title: '实时预览', description: '提供实时预览功能，让学生即时查看和调整智能体的编排效果。' },
        { title: '图形界面', description: '图形化的操作界面，帮助学生轻松理解和操作大模型智能体编排。' },
        { title: '快速调试', description: '支持快速调试功能，让学生能够立即发现和修复逻辑问题，提高开发效率。' },
      ]
    case '灵活搭建':
      return [
        { title: '简易创建', description: '学生可以通过简单操作创建垂直领域的知识库，无需复杂技术。' },
        { title: '知识管理', description: '提供直观的管理界面，方便用户添加、删除和更新知识库内容。' },
        { title: '自定义扩展', description: '学生可以根据需要灵活扩展知识库，增加特定领域的专业知识。' },
      ]
    case '自由集成':
      return [
        { title: '简单接入', description: '学生可以轻松接入各种第三方API，快速扩展应用功能。' },
        { title: '灵活配置', description: '提供灵活的配置选项，学生可以根据需求自定义API集成设置。' },
        { title: '数据获取', description: '支持通过第三方API获取外部数据，增强应用的数据源和智能化程度。' },
        { title: '功能扩展', description: '学生可以利用第三方API实现复杂功能，丰富应用的多样性和实用性。' },
      ]
    case '一键发布':
      return [
        { title: '一键发布', description: '学生只需简单操作即可将开发的应用快速发布到平台或其他渠道。' },
        { title: '快速部署', description: '支持快速部署功能，让学生的创新应用能够立即上线，供用户使用和反馈。' },
        { title: '无需运维', description: '无需复杂的运维知识，平台自动处理应用的运行和维护，让学生专注于创新。' },
        { title: '共享交流', description: '学生可以通过平台分享应用，与其他用户进行交流和合作，提升应用影响力。' },
      ]
    default:
      return []
  }
}
</script>

<template>
  <div class="platform-section">
    <div class="header">
      <div class="text">
        <h1 class="title">
          智链大模型创新实践平台
        </h1>
        <p class="subtitle">
          五大核心能力全程支持，全面助力AI+X创新实践，从创意到落地无缝衔接。
        </p>
      </div>
      <div class="buttons-row">
        <button
          class="button"
          :class="{ 'blue-button': activeTab === '一键接入' }"
          @mouseenter="setActiveTab('一键接入')"
        >
          大模型能力 一键接入
        </button>
        <button
          class="button"
          :class="{ 'blue-button': activeTab === '可视化编排' }"
          @mouseenter="setActiveTab('可视化编排')"
        >
          大模型智能体 可视化编排
        </button>
        <button
          class="button"
          :class="{ 'blue-button': activeTab === '灵活搭建' }"
          @mouseenter="setActiveTab('灵活搭建')"
        >
          垂域知识库 灵活搭建
        </button>
      </div>
    </div>
    <div class="bottom">
      <div class="card">
        <div class="card-content">
          <div class="text-content">
            <div v-for="(item, index) in renderContent()" :key="index" class="text-item">
              <h3 class="card-title">
                {{ item.title }}
              </h3>
              <p class="card-description">
                {{ item.description }}
              </p>
            </div>
          </div>
        </div>
        <div
          class="card-background"
          :style="{ backgroundImage: `url(${getBackgroundImage})` }"
        />
      </div>
      <div class="buttons-column">
        <button
          class="button"
          :class="{ 'blue-button': activeTab === '自由集成' }"
          @mouseenter="setActiveTab('自由集成')"
        >
          第三方API 自由集成
        </button>
        <button
          class="button"
          :class="{ 'blue-button': activeTab === '一键发布' }"
          @mouseenter="setActiveTab('一键发布')"
        >
          创新应用 一键发布
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.platform-section {
  width: 1201px;
  padding: 20px;
  margin: 0 auto;
  margin-bottom: 500px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.text .title {
  font-family: 'Alimama ShuHeiTi', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 39.23px;
  color: #1d1d1f;
}

.text .subtitle {
  font-family: 'PingFang SC', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #35355e99;
  margin: 0;
  margin-right: -210px;
}

.buttons-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.buttons-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button {
  width: 151px;
  height: 100px;
  padding: 16px 12px;
  border-radius: 4px 16px 4px 16px;
  font-family: 'Alibaba PuHuiTi', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  border: 1px solid #b3d6fc;
  background: #ffffff;
  transition: background 0.3s, color 0.3s;
  margin-right: 15px;
}

.button:hover {
  background: linear-gradient(180deg, #5e85f7 0%, #417eff 100%);
  color: #ffffff;
}

.blue-button {
  background: linear-gradient(180deg, #5e85f7 0%, #417eff 100%);
  color: #ffffff;
}

.bottom {
  display: flex;
  gap: 10px;
}

.card {
  width: 1700px;
  height: 327px;
  border-radius: 16px 0 0 0;
  background: linear-gradient(
      96.43deg,
      rgba(222, 232, 243, 0.4) 0.33%,
      rgba(222, 233, 245, 0.4) 100%
  );
  border: 1px solid;
  border-image-source: linear-gradient(97.06deg, #b3d6fc 1.84%, #e7f3ff 99.65%);
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 1;
}

.text-content {
  width: 100%;
  margin-left: 20px;
}

.text-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon {
  width: 30px;
  height: 20px;
  margin-right: 10px;
}

.card-title {
  font-family: 'Alibaba PuHuiTi', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 27.44px;
  color: #000;
  margin-right: 10px;
}

.card-description {
  font-family: 'Alibaba PuHuiTi', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.95px;
  color: #5774a0;
}

.card-background {
  position: absolute;
  top: 0;
  left: 60%;
  width: 40%;
  height: 100%;
  background-size: cover;
  z-index: 0;
}
</style>
